<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07_猜数字</title>
</head>
<body>
<h3>已生成一个1~100的随机数</h3><br>
<input type="text" placeholder="请输入你猜的数字" id="i1">
<button onclick="guess()">点我验证</button>
<h3>小提示:<span></span></h3>
<script>
    //1.生成随机数
    let n=parseInt(Math.random()*100)+1;
    console.log('打个小抄'+n);
    //6.定义一个变量用来统计猜的次数
    var count = 0;
    //2.定义猜数字的方法
    function guess(){
        //3.拿到用户猜的数字
        let num=document.getElementById('i1').value;
        //8.对接收的数据做合法性的正则校验
        //一对正斜杠(/)用来包裹正则表达式
        //^表示开头，$表示结尾，\d表示数字+表示至少出现一次
        //.test(参数) 用来判断是否匹配前面的正则表达式，匹配返回true，不匹配返回false
        if (!/^\d+$/.test(num)){
            alert('请输入数字');
            return;
        }

        //4.获取用来显示结果的span元素
        let spanE=document.querySelector('span');
        //7.每猜一次 统计次数+1
        count++;
        //5.拿着用户猜的数字与随机数做比较
        if (num>n){
            spanE.innerHTML='猜大了';
        }
        else if(num<n){
            spanE.innerHTML='猜小了';
        }
        else {
            spanE.innerHTML='恭喜你用了'+count+'次数猜对了';
        }
    }
</script>
</body>
</html>